<template>
  <div class="spread-detail-container" v-title data-title="我的推广">
    <div v-if="!loadding">
    <div class="header">
      <div class="header-top">
        <span class="money">
          {{totalCommision||0}}
        </span>
        <span class="desc">
          推广总佣金
        </span>
      </div>
      <div class="header-bottom">
        <div class="item border-right">
          <span class="money">{{totalPaymentMoney||0}}</span>
          <span class="desc">已兑换金额</span>
        </div>
        <div class="item">
          <span class="money">{{totalSurplusMoney||0}}</span>
          <span class="desc flex">
            <span>剩余待兑换金额</span>
            <span class="icon" @click="showPop=!showPop">
              <div class="pop-up" v-show="showPop">可兑现日期: <span>{{exchangeDate||'未知'}}</span>
                <span v-show="showPop" class="triangle_border_down"></span>
              </div>
            </span>
          </span>
        </div>
      </div>
    </div>
    <div class="depart">
      <div class="history-header border-bottom">
          <span class="left-deco"></span>
          <span class="date-unit">今日</span>
          <span class="right-deco"></span>
      </div>
      <div class="history-content">
        <div class="item" v-if="todayExtensionList.length" v-for="item in todayExtensionList">
          <span class="phone">{{item.registerPhone|fieldEllipsis}}</span>
          <span class="date">{{item.registerTime|dataFormat('yyyy-MM-dd hh:mm:ss')}}<i v-if="item.isAnvancedAuth" class="gaoji"></i></span>
        </div>
        <div class="item" v-if="!todayExtensionList.length" style="justify-content: space-around">--</div>
      </div>
    </div>
    <div class="depart">
      <div class="history-header border-bottom">
        <span class="left-deco"></span>
        <span class="date-unit">昨日</span>
        <span class="right-deco"></span>
      </div>
      <div class="history-content">
        <div class="item" v-if="yesterdayExtensionList.length" v-for="item in yesterdayExtensionList">
          <span class="phone">{{item.registerPhone|fieldEllipsis}}</span>
          <span class="date">{{item.registerTime|dataFormat('yyyy-MM-dd hh:mm:ss')}}<i v-if="item.isAnvancedAuth" class="gaoji"></i></span>
        </div>
        <div class="item" v-if="!yesterdayExtensionList.length" style="justify-content: space-around">--</div>
      </div>
    </div>
    <div class="depart">
      <div class="history-header border-bottom">
        <span class="left-deco"></span>
        <span class="date-unit">历史</span>
        <span class="right-deco"></span>
      </div>
      <div class="history-content">
        <div class="item" v-if="beferYesExtensionList.length" v-for="item in beferYesExtensionList">
          <span class="phone">{{item.registerPhone|fieldEllipsis}}</span>
          <span class="date">{{item.registerTime|dataFormat('yyyy-MM-dd hh:mm:ss')}}<i v-if="item.isAnvancedAuth" class="gaoji"></i></span>
        </div>
        <div class="item" v-if="!beferYesExtensionList.length" style="justify-content: space-around">--</div>
      </div>
    </div>
    </div>
    <div class="loading-container" v-if="loadding">
      <loading></loading>
    </div>
  </div>
</template>
<script>
  import Loading from '@/components/loading/loading'
  import { mapMutations } from 'vuex'
  export default{
      name:'spreadDetail',
    data(){
          return{
            showPop:false,
            loadding:false,
            beferYesExtensionList:[],//历史
            todayExtensionList:[],//今日
            yesterdayExtensionList:[],//昨日
            totalCommision:'',//总佣金
            totalPaymentMoney:'',//已兑换的佣金
            totalSurplusMoney:'',//剩余总佣金
            exchangeDate:'',//兑换时间
          }
    },
    components:{
      Loading
    },
    methods:{
      ...mapMutations(['changeUserTel', 'changeUserToken']),
      getSpreadDetail(){
        return this.axios.get('/list/as/app/financial/api/extension/list')
      },
      //获取推广佣金
      getSpreadMoney(){
        return this.axios.get('/list/as/app/financial/api/extension/commission')
      },
    },
    created(){
    //获取url中的用户信息
    const token = this.$route.query.token;
    const phone = this.$route.query.phone;
    if(token){
      this.changeUserToken(token)
    }
    if(phone){
      this.changeUserTel(phone)
    }
     this.loadding=true;
      this.axios.all([this.getSpreadMoney(),this.getSpreadDetail()]).then(this.axios.spread((money, detail) => {
        if(money.data.code === 200){
          money = money.data.data;
          this.totalCommision = money.totalCommision;
          this.totalPaymentMoney = money.totalPaymentMoney;
          this.totalSurplusMoney = money.totalSurplusMoney;
          this.exchangeDate = money.exchangeDate;
        }
        if(detail.data.code === 200){
          detail = detail.data.data
          this.todayExtensionList = detail.todayExtensionList
          this.beferYesExtensionList = detail.beferYesExtensionList
          this.yesterdayExtensionList = detail.yesterdayExtensionList
        }
        this.loadding=false;
      })).catch(()=>{
        this.loadding=false;
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .pop-up
    width:2.86rem
    height:.6rem
    line-height:.6rem
    font-size .24rem
    position:absolute
    background-color:rgba(58,58,58,.9)
    border-radius .08rem
    top -.7rem
    right -.3rem
  .triangle_border_down
    width:0;
    height:0;
    border-width:.1rem .1rem 0;
    border-style:solid;
    border-color:#3A3A3A transparent transparent;/*灰 透明 透明 */
    opacity .9
    margin:.4rem auto;
    z-index 5
    position:absolute
    top:.2rem
    left 2.25rem
  .flex-cell
    flex 1
  .spread-detail-container
    background-color $bgColor
    padding .3rem
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    overflow-y scroll
    .loading-container
      position fixed
      top 50%
      left 50%
      transform translate(-50%,-50%)
    .header
      background:linear-gradient(to right , $gradientTint,$gradientDeep)
      height 3.1rem
      border-radius .08rem
      .header-top
        color white
        display flex
        padding .36rem 0
        flex-direction column
        text-align center
        .money
          font-size .5rem
        .desc
          font-size .26rem
      .header-bottom
        display flex
        .border-right
          border-color white
        :before
          border-color white
        .item
          text-align center
          color white
          display flex
          flex-direction column
          align-items center
          flex 1
          margin  .2rem 0
          .money
            font-size .36rem
            line-height .72rem
          .desc
            font-size .26rem
            line-height .44rem
            &.flex
              display flex
              align-items center
              text-align center
            .icon
              background url("/static/img/ic_shuoming@2x.png") no-repeat
              display inline-block
              width .44rem
              height .44rem
              background-size 100%
              position relative
    .depart
      margin-top .3rem
      border-radius .08rem
      padding 0 .14rem
      background-color white
      .history-header
        height .92rem
        background white
        text-align center
        line-height .92rem
        .left-deco
          background url("/static/img/left.png") no-repeat
          background-size 100%
          height .16rem
          width 1.14rem
          display inline-block
        .right-deco
          background url("/static/img/right.png") no-repeat
          background-size 100%
          height .16rem
          display inline-block
          width 1.14rem
        .date-unit
          color #797979
          padding 0 .08rem
      .history-content
        padding .44rem .52rem
        display flex
        flex-direction column
        color #333333
        .item
          display flex
          justify-content space-between
          line-height .7rem
          .date
            position relative
            .gaoji
              position absolute
              background url("/static/img/ic_gaoji@2x.png") no-repeat
              background-size 100%
              height .32rem
              width  .64rem

</style>
